<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SimpleeUI</title>
	<link rel="stylesheet" href="../src/css/simpleeui.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="header">
    <div class="container">
      <div class="grid grid-4 first logo"><a href="index.html">SimpleeUI</a></div>
      <div class="grid grid-11">
        <ul class="menu unstyled inline">
          <li><a href="index.html">首页</a></li>
          <li><a href="css.html">CSS组件</a></li>
          <li><a href="javascript.html">JS插件</a></li>
          <li><a href="standard.html">使用规范</a></li>
        </ul>
      </div>
      <div class="grid grid-5 last"><a href="mailto:simplee925@gmail.com">@simplee_</a></div>
    </div>
  </div>
  <div class="content clearfix">
    <div class="container">
      <div class="grid grid-20">
        <p>SimpleeUI是一个用于网站项目通用的前端解决方案，其目的是为了规范和简化网站项目的前端开发流程。组件的基础样式与组件基本参照Bootstrap2，与Bootstrap、Foundation这些前端框架不同的是，SimpleeUI只专注PC平台的网站项目，并定义了多个拥有基础HTML结构和基础样式的常用组件。在统一组件结构的基础上进行个性化定制。充分保留网站页面的多样性！框架支持IE7+/Chrome/Firefox等常见浏览器。</p>
      </div>
      <div class="grid grid-20 setup">
        <div class="grid grid-12 first use">
          <h4>一、使用方法</h4>
          <pre><p>1、下载<a href="#">SimpleeUI</a></p><p>2、在html中引入jQuery和SimpleeUI</p><p>3、开始使用</p></pre>
        </div>
        <div class="grid grid-8 last note">
          <h4 class="text-info">注意</h4>
          <p class="text-error">必须使用HTML5文档类型！</p>
          <blockquote><p>&lt;!DOCTYPE html&gt;</p><p>&lt;html lang="zh"&gt;</p><p>...</p><p>&lt;html&gt;</p></blockquote>
        </div>
      </div>
      <div class="grid grid-20 css">
        <h4>二、CSS组件</h4>
        <table class="m-table demo">
          <tr>
            <td width="25%"><a href="css.html#button">Buttons(按钮)</a></td>
            <td width="25%"><a href="css.html#table">Tables(表格)</a></td>
            <td width="25%"><a href="css.html#tab">Tabs(标签切换)</a></td>
            <td><a href="css.html#breadcrumb">Breadcrumbs(面包屑)</a></td>
          </tr>
          <tr>
            <td><a href="css.html#sidemenu">SideMenu(侧边菜单)</a></td>
            <td><a href="css.html#pagination">Pagination(分页)</a></td>
            <td><a href="css.html#lists">lists(列表)</a></td>
            <td><a href="css.html#navigation">Navigation(导航)</a></td>
          </tr>
          <tr>
            <td><a href="css.html#tag">Tag(标签)</a></td>
            <td><a href="css.html#dropdown">Dropdown(下拉菜单)</a></td>
            <td><a href="css.html#alert">Alert(警告框)</a></td>
          </tr>
        </table>
      </div>
      <div class="grid grid-20 css">
        <h4>三、JS组件</h4>
        <table class="m-table demo">
          <tr>
            <td width="25%"><a href="javascript.html#modal">Modals(模态弹窗)</a></td>
            <td width="25%"><a href="javascript.html#dorpdown">Dorpdowns(下拉菜单)</a></td>
            <td width="25%"><a href="javascript.html#tabs">Tabs(标签切换)</a></td>
            <td width="25%"><a href="javascript.html#tooltips">Tooltips(工具提示)</a></td>
          </tr>
          <tr>
            <td><a href="javascript.html#alert">Alert(警告框)</a></td>
            <td><a href="javascript.html#accordion">Accordion(手风琴)</a></td>
            <td><a href="javascript.html#backtotop">BackToTop(返回顶部)</a></td>
          </tr>
        </table>
      </div>
      <div class="grid grid-20 css">
        <h4>四、规范</h4>
        <table class="m-table demo">
          <tr>
            <td width="25%"><a href="standard.html#category">分类(Category)</a></td>
            <td width="25%"><a href="standard.html#name">命名(Naming)</a></td>
            <td width="25%"><a href="standard.html#format">格式(Format)</a></td>
            <td width="25%"><a href="standard.html#practice">最佳实践(Practice)</a></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="footer">
    HOMOLO.COM | &copy; 2013 Built By Simplee. All Right Reserved 
  </div>
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/plugin.js"></script>
</body>
</html>
